/* ------ UniAW from Ian Nicoll & Dacal ------

font-family: -apple-system, sans-serif;

 */

body {
	position: fixed;
	margin: 0;
	padding: 0;
	font-family: FuturaLT;
	font-size:2.5vw;
	overflow: hidden;
	background-color:#161616;
	color: #00FFFF;
	-webkit-animation: fadein 1s linear 1 normal;
	-webkit-animation-fill-mode: forwards; opacity:1;

}

* {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 }

.gray_bkg {
	-webkit-transform: translateZ(0);
	-webkit-filter: grayscale(0.4) brightness(0.8);
}

.sepia_bkg {
	-webkit-transform: translateZ(0);
	-webkit-filter: sepia(0.6) brightness(0.9);
}

@font-face {
	font-family: 'Default';
	src: url('../Fonts/Default.ttf');
}

@font-face {
	font-family: 'Default1';
	src: url('../Fonts/Default1.ttf');
}

@font-face {
	font-family: 'Default2';
	src: url('../Fonts/Neoneon.otf');
}

@font-face {
	font-family: 'MarketSaturday';
	src: url('../Fonts/MarketSaturday.ttf');
}

.FontColorRed {
	color: red;
}

.FontColorLime {
	color: Lime;
}

.fade-out {
	opacity: 0.0;
}

.fade-in {
	opacity: 1.0;
}

.scaleNormal {
	-webkit-transform: scale3d(1.0,1.0,1.0);
	opacity: 1.0;
 }

.scaleZero {
	-webkit-transform: scale3d(0.0,0.0,1.0);
	opacity: 0.0;
}

@-webkit-keyframes move {
	0%		{-webkit-transform : translateX(0%);}
	100%	{-webkit-transform : translateX(-75%);}
}

@-webkit-keyframes fadein {
	0%		{opacity : 0.0;}
	50%		{opacity : 0.0;}
	100%	{opacity : 1.0;}
}

@-webkit-keyframes animationsOnOffFader {
	0%		{opacity : 1.0;}
	70%		{opacity : 1.0;}
	100%	{opacity : 0.0;}
}

.forecastTranslateLeft { -webkit-transform: translateX(-50%); }
.forecastTranslateRight { -webkit-transform: translateX(0%); }

#All-Orig {
position: absolute;
height:100%;
width:100%;
}

/* STATUS BAR */

#statusBarContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 30; display:none;
	overflow: hidden;
}

#statusBar {
	position: absolute;
	left: -5%;
	width: 110%;
	height: 20px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8), 0px 3px 10px rgba(0, 0, 0, 0.7);
	display: none;
}

/* BACKGROUNDS */

#background {
    position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1.0;
    z-index: -20;
}

#LayerBack {
    position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1.0;
    z-index: -20;
}

#Now {
    position: absolute;
	width: 100%;
	height: 100%;
    z-index: -10;
    -webkit-transition: all 0.25s ease-in; display:none;
}

#Layer {
    position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1.0;
    z-index: -10;
    -webkit-transition: all 0.5s ease-in;
}

/* MAIN WALLS and OVERLAYS */

#MainWallBG { /* This one used in "TOP", "TOPLARGE" or "SIMPLE" */
	position: absolute; 
	background: url('../Images/Classic/blank.png') center no-repeat;
	background-size: 100% 100%;
	top: 0%; 
	width: 100%;
    height: 100%;
	z-index: 50;
	display:;
}
#SimpleInfoBG { /* This one used in "SIMPLE" */
	position: relative;
	top: 15.5%;
	left: 1.5%;
	width: 96.5%;
	height: 35%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);	
	box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
	border-radius: 0px;
	-webkit-backdrop-filter: blur(5px);
	display:none;
}

#WeatherInfoBG { /* This one used in "IAN" */
	position: absolute; 
	background: url('../Images/Classic/WeatherInfoBG.png') center no-repeat;
	background-size: 100% 100%;
	top: 17.2%; 
	width: 100%;
    height: 21%;
    opacity: 1.0;
	z-index: 30;
	display: none;
}

/* TOUCH LAYERS */

#TouchShowHourlyForecast {
	position: absolute;
	top: 10.5%;
	left: 27%;
	width: 23%;
	height: 13%;
	z-index: 1000; display:none;
}

#animationsTouchLayer {
	position: absolute;
	top: 23.8%;
	left: 27%;
	width: 46%;
	height: 13%;
	z-index: 3000; display:none;
}

#animationsOff{
	position: absolute;
	top: 36.6%;
	text-align: center;
	width: 100%;
	height: 2%;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.6);
	font-size: 3.58vw;
	opacity: 0.8;
	display: none;
	z-index: 52;
	-webkit-animation: animationsOnOffFader 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
}

#animationsOn{ 
	position: absolute;
	top: 36.6%;
	text-align: center;
	width: 100%;
	height: 2%;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.6);
	font-size: 3.58vw;
	opacity: 0.8;
	display: none;
	z-index: 52;
	-webkit-animation: animationsOnOffFader 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
}

#TouchMoonInfo {
	position: absolute;
	top: 10.5%;
	left: 50%;
	width: 23%;
	height: 13%;
	z-index: 1000; display:none;
}

#TouchHourlyForecastSlide {
	//background-color: red;
	position: absolute;
	top: 40%;
	left: 0px;
	width: 100%;
	height: 12%;
	z-index: 1003;
	display: none;
}

#TouchNext {
	position: absolute;
	top: 4%;
	right: 0%;
	width: 13%;
	height: 7%;
	z-index: 9999;
}

#Next {
	position: absolute;
	top: 2.5%;
	right: -15%;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0.0;
	font-size: 5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
}

#TouchPrevious {
	position: absolute;
	top: 4%;
	width: 13%;
	height: 7%;
	z-index: 9999;
}

#Prev {
	position: absolute;
	top: 2.5%;
	left: -15%;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0.0;
	font-size: 5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
}

#TouchHome {
	position: absolute;
	top: 2%;
	left: 30%;
	width: 40%;
	height: 7%;
	z-index: 9999;
}

/* TIMEDWALLS */

#WPContainerTW {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -10;
}

#WPoneTWContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}

#WPoneTW {
	position: absolute;
	width: 400%;
	height: 100%;
	-webkit-animation-duration: 722s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}

#WPtwoTWContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}

#WPtwoTW {
	position: absolute;
	width: 400%;
	height: 100%;
	-webkit-animation-duration: 722s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}

/* CLOCKS */

#Clock {
	position: absolute;
	top: 56.5%;
	width: 100%;
    height: 56.2%;
	z-index: 91; display:none;
}

#clockface {display: none;
	position: absolute;
	background-size: 100% 100%;
	width: 100%;
    height: 100%;
	opacity: 0.8;
	z-index: 1;
}

#clocklogo {display: none;
	position: absolute;
	background: url('../Images/Clock/logo.png') center no-repeat;
	background-size: 100% 100%;
	width: 100%;
    height: 100%;
	opacity: 0.8;
	z-index: 2;
}

#clockglass {display: none;
	position: absolute; 
	background: url('../Images/Clock/clockglass.png') center no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	z-index: 60;
}

/* ANALOG CLOCK */	

#analogClockFrame {
	position: absolute;
	background-size: 100% 100%;
	width: 100%;
    height: 100%;
	z-index: 2; display:none;
}

#clockhands {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 53; display:none;
}

#hourhand {
	background: url('../Images/Clock/day_hourhand.png') center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	z-index: 53; display:none;
}

#minhand {
	background: url('../Images/Clock/day_minhand.png') center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 54; display:none;
}

#sechand {
	position: absolute;
	background: url('../Images/Clock/sechand.png') center no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	z-index: 55; display:none;
}
	
#node {
	background: url('../Images/Clock/node.png') center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 56; display:none;
}

/* DIGITAL CLOCK */

#Digitalclock {
	position: absolute; display:none;
	width: 100%;
	height: 100%;
	top: 0.5%;
	z-index: 53;			
}

#digitalClockFrame {display: none;
	position: absolute;
	background-size: 100% 100%;
	width: 100%;
    height: 100%;
	z-index: 2;
}

#hours_minutes {
	position: absolute;
    text-align: center;
	top: 46.22%;
    left: 40%;
	height: 8%;
	width: 20%;
	font-family: Default2;
	font-size: 33px;
	color: #ffffff;
	text-shadow: 1px 1px 1px #000;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.4, #666));
	z-index: 55; display:none;
	
}

#second {display:none;
	position: absolute;
    text-align: left;
	top: 46.5%;
    left: 60%;
	height: 4%;
	width: 4%;
	font-family: DigitalDisplay;
	font-size: 4.3vw;
	z-index: 55;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}
	
#ampm {display:none;
	position: absolute;
    text-align: left;
	top: 49.7%;
    left: 60%;
	height: 4%;
	width: 4%;
	font-family: DigitalDisplay;
	font-size: 4.3vw;
	z-index: 55;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}

/* CLOCK CALENDAR */

#calendar {display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 50;
}

#number {
	position: absolute;
	width: 100%;
	height: 5%;
	top: 48%;
	text-align: center;
	font-size: 3.6vw; display:none;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
}

#day {
	position: absolute;
	width: 100%;
	height: 4%;
	top: 35.5%;
	text-align: center;
	font-size: 3.5vw;
	text-shadow: black 0px -1px 0px; display:none;
}

#month {
	position: absolute;
	width: 100%;
	height: 5%;
	top: 40%;
	text-align: center;
	font-size: 3.4vw;
	text-shadow: black 0px -1px 0px; display:none;
}

#year {
	position: absolute;
	width: 100%;
	top: 55.7%;
	text-align: center;
	font-size: 3vw;
	text-shadow: black 0px -1px 0px; display:none;
}

/* SECONDS LIGHT RING */

#secondhand_light {
	position: absolute;
	width: 43.4%;
	height: 24.4%;
	top: 11.7%;
	left: 28.2%;
	z-index: 50; display:none;
}
 
.sec {
	position: absolute;
	width: 200%;
	height: 100%;
	-webkit-border-radius: 50%;
	opacity: 0.7;
}
 
.sec_right-mask  {
	position: absolute;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	-webkit-transform-origin: 0% 50%;
}
 
.sec_left-mask  {
	position: absolute;
	left: -100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-transform-origin: 100% 50%;
	-webkit-transform: rotateZ(6deg);
}

/* DATA (ALPHABETICAL ORDER) */

#address{
    position:absolute;
    top:54%;
    text-align:center;
    width:100%;
    font-size:3.4vw;
    text-shadow: black -1px 1px 1px, black -2px 2px 3px;
}

#APIName{
    position:absolute;
    top:56.8%;
    text-align:center;
	font-style: italic;
    width:100%;
    font-size:3.2vw;
    text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	-webkit-transition: all 0.4s ease-in;
	z-index: 9999;
}

#city {
	position: absolute;
	top: 84.35%;
	right: 16%;
	width: 100%;
	height: 4%;
	font-size: 3.3vw;
	text-align: right;
	font-family: Default1;
	text-shadow: 1px 1px 1px #000;
	color: #888;
	z-index: 50; display:none;
}

#coordinates {
	position: absolute;
	text-align: right;
	top: 14.5%;
	right: 2%;
	width: 31%;
	font-size: 3vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

#Day0desc {
	position: absolute;
	top: 81.5%;
	left: 15.5%;
	width: 100%;
	font-size: 3vw;
	text-align: left;
	font-family: Default1;
	color:#888;
	text-shadow: 1px 1px 1px #000;
	z-index: 50; display:none;
}
#Day0Icon { /* CurrentConditionIcon */
	position: absolute;
	top: 84%;
	left: 16%;
	height: auto;
	width: 8%;
	z-index: 92;
	display:none;
}
#HiLo{	
	position: absolute; 
      top: 90%; 
      right: 16%; 
      width: 100%; 
      height: 100%;
      text-align: right;
	font-family: Default1;
	font-size: 13px;
      text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	color: #888;
	z-index: 50; display:none;
}
/*#Day0Hi {
	position: absolute;
	top: 24.7%;
	right: 2%;
	width: 24%;
	font-size: 3.7vw;
	text-align: right;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50; display:none;
}

#Day0Lo {
	position: absolute;
	top: 27.5%;
	right: 2%;
	width: 24%;
	font-size: 3.7vw;
	text-align: right;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50; display:none;
}*/

#Day0Temp {
	position: absolute; 
      top: 67%; 
      left: 2%; 
      width: 100%; 
      height: 100%;
	text-align: left;
	font-family: Default1;
	font-size: 20px;
	text-shadow: 1px 1px 1px #000;
	color: #888;
	z-index: 50;
	-webkit-transition: all 1s ease-in-out; display:none;
}

#dewpt {
	position: absolute;
	text-align: right;
	top: 11.5%;
	right: 2%;
	width: 37%;
	font-size: 3.4vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

#feelslike {display: none;
	position: absolute;
	text-align: left;
	top: 28.5%;
	left: 2%;
	width: 30%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
}

#humidity {display: none;
	position: absolute;
	text-align: left;
	top: 31.4%;
	left: 2%;
	width: 31%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
}

#moonDescription{display: none;
	position: absolute;
	text-align: center;
	top: 57%;
	width: 100%;
	font-size: 3.2vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 51;
}

#MoonInfo {display:none;
	position: absolute;
	text-align: center;
	top: 18.3%;
	left: 2%;
	width: 96%;
	height: 6%;
	z-index: 50;
	-webkit-transition: opacity 0.6s ease-in-out;
}
#riseset{
     position: absolute; 
      top: 90%; 
      left: 16.5%; 
      width: 100%; 
      height: 100%;
      text-align: left;
	font-family: Default1;
	font-size: 13px;
	color:  #888;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	z-index: 50;
     -webkit-transition: opacity 0.6s ease-in-out display:none;
}
#Moonrise{
	position: absolute;
	text-align: left;
	width: 25%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}

#Moonset {
	position: absolute;
	text-align: right;
	right: 0%;
	width: 25%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}

#pressure {
	position: absolute;
	text-align: left;
	top: 11.5%;
	left: 2%;
	width: 37%;
	font-size: 3.4vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

#rising {
	position: absolute;
	text-align: left;
	top: 7.8%;
	left: 2%;
	width: 10%;
	font-size: 5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

#SingleLineDate{
    position:absolute;
      font-family: Default1;
	font-size: 16px;
	color: #888;
	text-shadow: 1px 1px 1px #000;
      top: 89.5%; 
      left: 0px; 
      width: 100%;
      text-align: center;
      z-index: 50; display:none;
}

#SunInfo {
	position: absolute;
	text-align: center;
	top: 80%;
	left: 2%;
	height: 6%;
	width: 96%;
	z-index: 50;
	-webkit-transition: opacity 0.6s ease-in-out; display:none;
}
#riseset{
     position: absolute; 
      top: 90%; 
      left: 16%; 
      width: 100%; 
      height: 100%;
      text-align:left;
	font-family: Default1;
	font-size: 13px;
	color:  #888;
	//text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	z-index: 50;
     -webkit-transition: opacity 0.6s ease-in-out; display:none;
}
/*#Sunrise{
	position: absolute;
	text-align: left;
	width: 25%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}

#Sunset{
	position: absolute;
	text-align: right;
	right: 0%;
	width: 25%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}*/

#UVindex {display: none;
	position: absolute;
	text-align: right;
	top: 30.5%;
	right: 2%;
	width: 28%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
}

#visibility {display: none;
	position: absolute;
	text-align: left;
	top: 14.5%;
	left: 2%;
	width: 32%;
	font-size: 3.4vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

#windInfoContainer {display: none;
	position: absolute;
	top: 32.5%;
	left: 0.2%;
	width: 37%; display:none;
}

#windArrow {
	position: relative;
	text-align: center;
	font-size: 5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	-webkit-transition: all 3s ease-in-out;
	z-index: 50; display:none;
}

#windspeed {
	position: relative;
	text-align: left;
	font-size: 3.3vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50; display:none;
}

#xmlupdate {
	position: absolute;
	text-align: right;
	top: 34.1%;
	right: 2%;
	width: 37%;
	font-size: 3.5vw;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
	z-index: 50;
	display: none;
}

/* CONTAINERS */

#astronautContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 16;
    overflow: hidden;
}

#big_balloonContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 25;
    overflow: hidden;
}

#birdsContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 24;
    overflow: hidden;
}

#bubbleContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 49;
    overflow: hidden;
}

#circleContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#cloudContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 21;
    overflow: hidden;
}

#dandelionContainer {
    position: absolute;
    top: 0px; /* controlled in main.js for iPhone X */
	left: 0px;
    width: 100%;
    height: 100%;
    z-index: 59;
    overflow: hidden;
}

#dropContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#fogContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 80;
    opacity: 0.8;
    overflow: hidden;
}

#frameContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 20;
    overflow: hidden;
}

#leafContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 50;
    overflow: hidden;
}

#medium_balloonContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 24;
    overflow: hidden;
}

#meteorContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 7;
    overflow: hidden;
}

#rainbowContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 22;
    overflow: hidden;
}

#rainContainer {
    position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
    z-index: 90;
}

#small_balloonContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 23;
    overflow: hidden;
}

#starContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 6;
    overflow: hidden;
}

#sun_moonContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 10;
    overflow: hidden;
}

#twilightBG {
	position: absolute;
	background: url('../Images/Layer/twilight.png') center no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 18;
	-webkit-transition: all 1s ease-in-out;
}

#WeatherContainer {
	position: absolute;
	width : 100%;
	height: 100%;
	z-index: 150;
}

#windmillContainer{
    position: absolute;
    top: 0px;  /* controlled in main.js for iPhone X */
	left: 0px;
    width: 100%;
    height: 100%;
    z-index: 59;
    overflow: hidden;
}

#wiperContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    z-index: 50;
    overflow: hidden;
}

#wireContainer {
    position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/* FORECASTS */

#forecast_hourlyforecast_Container {
	position: absolute;
	top: 38%;
	width : 100%;
	height: 15%;
	-webkit-transition: all 0.4s ease-in-out;
	z-index: 100; display:none;
}

#forecastContainer {
	position: absolute;
	top: 0%;
	width : 100%;
	height: 100%; display:none;
	z-index: 100;
	-webkit-transition: all 0.4s ease-in-out;
}

#forecastBG {
	position: absolute; 
	background: url('../Images/Classic/forecastbg.png') center no-repeat;
	background-size: 100% 119%;
	width: 100%;
    height: 110%;
	top: -5%;
	left: 0%; 
    opacity: 1.0;
	z-index: -1;
}

#Day1Icon, #Day2Icon, #Day3Icon, #Day4Icon, #Day5Icon {
	position: absolute;
	top: 4%;
	left: 3%; /* set in main.js */
	width: 11%;
	height: 40%; display:none;
}

#Day1Pop, #Day2Pop, #Day3Pop, #Day4Pop, #Day5Pop {
	position: absolute;
	top: 34%;
	left: 12%; /* set in main.js */
 	font-weight: normal;
	color: #88C5F0;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3vw;
	opacity: 1.0; display:none;
}

#Day1, #Day2, #Day3, #Day4, #Day5 {
	position: absolute;
	top: 46%;
	left: 2%; /* set in main.js */
	width: 17%;
	text-align: center;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3.6vw; display:none;
}

#Day1HiLo, #Day2HiLo, #Day3HiLo, #Day4HiLo, #Day5HiLo {
	position: absolute;
	top: 65%;
	left: 2.2%; /* set in main.js */
	width: 17%;
	text-align: center;
 	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3vw; display:none;
}

/* HOURLY FORECAST */

#hourlyforecastContainer {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 0.4s ease-in-out;
	z-index: 100; display:none;
}

#hourlyforecast {
	position: absolute;
	top: 1%;
	width: 200%;
	height: 100%;
	z-index: 100; display:none;
}

#hourlyforecastBG{
	position: absolute; 
	background: url('../Images/Classic/long_hourlyforecastbg.png') center no-repeat;
	background-size: 100% 119%;
	width: 100%;
    height: 110%;
	top: -5%; 
	left: 0%; display:none;
	z-index: -1;
}

#Hicon0, #Hicon1, #Hicon2, #Hicon3, #Hicon4, #Hicon5, #Hicon6, #Hicon7, #Hicon8, #Hicon9, #Hicon10, #Hicon11 {
	position: absolute;
	top: 5%;
	left: 1.4%; /* set in main.js */
	width: 5.5%;
	height: 40%; display:none;
}

#Hpop0, #Hpop1, #Hpop2, #Hpop3, #Hpop4, #Hpop5, #Hpop6, #Hpop7, #Hpop8, #Hpop9, #Hpop10, #Hpop11 {
	position: absolute;
	top: 34%;
	left: 2.5%; /* set in main.js */
	width: 5%;
	text-align: right;
	color: #88C5F0;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3vw; display:none;
}

#Hour0, #Hour1, #Hour2, #Hour3, #Hour4, #Hour5, #Hour6, #Hour7, #Hour8, #Hour9, #Hour10, #Hour11 {
	position: absolute;
	top: 48%;
	left: 1.57%; /* set in main.js */
	width: 6%;
 	text-align: center;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3vw; display:none;
}

#Htemp0, #Htemp1, #Htemp2, #Htemp3, #Htemp4, #Htemp5, #Htemp6, #Htemp7, #Htemp8, #Htemp9, #Htemp10, #Htemp11 {
	position: absolute;
	top: 63%;
	left: 1.3%; /* set in main.js */
	width: 7.5%;
 	text-align: center;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3.6vw; display:none;
}

/* MOON PHASE */

#Moonphase {
	position: absolute;
	top: 38%;
	width : 100%;
	height: 15%;
	-webkit-transition: all 0.4s ease-in-out; display:none;
}

#mooninfoBG {
	position: absolute; 
	background: url('../Images/Classic/mooninfobg.png') center no-repeat;
	background-size: 100% 119%;
	width: 100%;
    height: 110%;
	top: -5%;
	left: 0%; 
    opacity: 1.0;
	z-index: -1;
}

#MoondateIcon0, #MoondateIcon1, #MoondateIcon2, #MoondateIcon3 {
	position: absolute;
	top: 0%;
	left: 7%; /* set in main.js */
	width: 13%;
	height: 50%; display:none;
}

#Moondate0, #Moondate1, #Moondate2, #Moondate3 {
	position: absolute;
	top: 46%;
	left: 1.8%; /* set in main.js */
	width: 23%;
 	text-align: center;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px;
 	font-size: 3.5vw; display:none;
}

#RAMStatsBG {
	position: absolute;
	bottom: 0.5%;
	left: 6%;
	width: 86%;
	height: 9%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);	
	box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
	border-radius: 0px;
	-webkit-backdrop-filter: blur(5px); display:none;
}

#BatteryCircleImage{ /* For IAN */
	position: absolute;
	top: -4%;
	background-size: 100% 100%;
	width: 100%;
    height: 55.4%;
	z-index: 160;
	display: none;
}

#battery_pos { 
	position: absolute;
	top: 0%; /* For Battery Level/State nearer to top of screen leave this 0%; for near bottom set this to 80-100% */
	left: 0%;
	height: 100%;
	width: 100%; display:none;
}

#BatteryLineImage{ /* For TOP and SIMPLE */
	position: absolute;
	top: 5%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	background-size: 100% 100%;
	width: 41%;
	height: 3%; 
	z-index: 100;
	left: 8%;
	display: none;
}

#BatteryLevel{
	position: absolute;
	top:67%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	right: 2%;
	font-size: 20px;
	z-index: 170;
	font-family: Default1;
	text-shadow: 1px 1px 1px #000; display:none;
}

#BatteryState{display: none;
	position: absolute;
	top:13.4%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	left: 4.8%;
	width: 35%;
	text-align: center;
	font-size: 3.2vw;
	z-index: 170;
	text-shadow: black -1px 1px 1px, black -2px 2px 3px; display:none;
}

#Ram_pos{display:none;
	position:absolute;
	top: 91%; /* For RAM Stats nearer to top of screen leave this 0%; for near bottom set this to 80-100% */
	height: 100%;
	width:100%;
}

#FreeRAM{
	position: absolute;
	top: 0%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	width: 35%;
	text-align: left;
	left: 9%;
	font-size: 3.5vw;
	opacity: 1.0;
	z-index: 100;
	text-shadow:-1px 2px 1px black, -1px 2px 1px black; display:none; 
}

#UsedRAM{
	position: absolute;
	top:2.8%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	width: 35%;
	text-align: left;
	left: 9%;
	font-size: 3.5vw;
	opacity: 1.0;
	z-index: 100;
	text-shadow:-1px 2px 1px black, -1px 2px 1px black; display:none;
}

#TotalRAM{
	position: absolute;
	font-size: 3.5vw;
	opacity: 1.0;
	z-index: 100;
	top:0%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	width: 45%;
	text-align: left;
	left: 53%;
	text-shadow:-1px 2px 1px black, -1px 2px 1px black;
}

#TotalPhysRAM{
	position: absolute;
	font-size: 3.5vw;
	opacity: 1.0;
	z-index: 100;
	top:2.8%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	width: 45%;
	text-align: left;
	left: 53%;
	text-shadow:-1px 2px 1px black, -1px 2px 1px black;
}

#Batt_RAM_SB_pos {
	position: absolute;
	top: 0%; /* For Batt_RAM_SB nearer to top of screen leave this 0%; for near bottom set this to 80-100% */
	left: 0%;
	height: 100%;
	width: 100%;
}
	
#Batt_RAM_SB {
	position: absolute;
	top: 51%; /* Set 0-50% for higher on screen; for nearer to bottom set this 0-5% */
	left: 1.5%;
	width: 96.5%;
	height: 2.5%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);	
	box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
	border-radius: 0px;
/*	-webkit-backdrop-filter: blur(5px);*/
	font-size: 3.0vw;
	text-align: center;
	text-shadow:-1px 1px 1px black, -1px 1px 1px black;
	z-index: 100;
}

/*///////// NEW WW3 STUFF ///////////*/

#SummaryContainer {
	position: absolute;
	top: 0%; /* For Forecast Summaries nearer to top of screen leave this 0%; for near bottom set this to 80-100% */
	height: 100%;
	width: 100%;
}

/* All Forecast Extras */
#defSumm,#wuSumm,#fioSumm,#accuDayShortSumm,#accuDayLongSumm,#yahooSumm {
	position:absolute;
	top: 60%; 
	left: 11%;
	width: 72%;
	height: 20%;
	overflow-y: hidden;
	font-size: 3.5vw;
	text-align: justify;
	line-height: 120%;
	z-index: 9998;
	padding-top: 2%;
	padding-left: 3%;
	padding-right: 3%;
	border-radius: 12px;
	-webkit-transition: all 0.4s ease-in;
	background-color: rgba(0, 0, 0, 0.6);
/*	text-shadow:-1px 2px 1px black, -1px 2px 1px black; */ 
	display: none; /* DON'T TOUCH THIS -automatic in main.js per user's API choice */

}

#TouchSumm { /* On-Off Touch Layer for Forecast Summaries */
	//background-color: aqua;
	position: absolute;
	top: 60%;  /* set in main.js for Wallpaper.html */
	left: 10%;
	width: 50%;
	height: 25%;  /* set in main.js for Wallpaper.html */
	z-index: 9999;
}

/* WeatherUnderground Current Extras */
#wuStuff {
	position:absolute;
	width:88%;
	top:1%;
	left:1.5%;
	font-size:3.2vw;
	text-align:left;
	height:23.4%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	z-index:9998;
	display: none;
}

/* DarkSky (fio) Current Extras */
#fioStuff {
	position:absolute;
	width:88%;
	top:25%;
	left:1.5%;
	font-size:3.2vw;
	text-align:left;
	height:28%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	z-index:9998;
	display: none;
}

/* Accuweather Current Extras */
#accuStuff {
	position:absolute;
	width:88%;
	top:53%;
	left:1.5%;
	font-size:3.2vw;
	text-align:left;
	height:32.2%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	z-index:9998;
	display: none;
}
